<template>
    <div class="info-collect">
        <Crumb name="Sales Order"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Qutation Number"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="visitList"
                        border
                        stripe
                        style="width: 100%">

                    <el-table-column
                            prop="quotation"
                            label="Quotation Number"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="salesNo"
                            label="Sales Number"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="requestDate"
                            label="Request Date"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="requestBy"
                            label="Request By"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="customerName"
                            label="Customer"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="status"
                            label="Status"
                    >
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">Detail
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Unit Quotation"
                        :visible.sync="dialogVisible"
                        width="100%"
                >
                    <el-form ref="ruleForm" label-width="200px" class="demo-ruleForm" :inline="true">
                        <el-form-item label="Request No">
                            <el-input class="input" v-model="requestNo"  :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="RequestDate">
                            <el-date-picker class="input" v-model="requestDate" :disabled="true"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="Request By">
                            <el-select class="input" v-model="requestBy" :disabled="true">
                                <el-option value="Clikarang">Clikarang</el-option>
                                <el-option value="Andy">Andy</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Customer">
                            <el-select class="input" v-model="customerName" :disabled="true">
                                <el-option value="Clikarang">PT.KINGSUM TECH</el-option>
                                <el-option value="Andy">PT.INLINE TECH</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="Status" prop="status">
                            <el-select class="input" v-model="status" :disabled="true">
                                <el-option value="1">save</el-option>
                                <el-option value="2">submit</el-option>
                                <el-option value="3">approved</el-option>
                                <el-option value="4">poed</el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div class="spin"></div>

                    <!-- unit table start -->
                     <el-table  :data="unitList"
                                border
                                stripe>
                         <el-table-column type="expand">
                             <template slot-scope="props">
                                 <el-form label-position="left" inline class="demo-table-expand">
                                     <div v-for="(item,index) in props.row.options" :key="index">
                                         <el-form-item label="Options">
                                             <span>{{ item.value }}</span>
                                         </el-form-item>
                                     </div>

                                 </el-form>
                             </template>
                         </el-table-column>
                         <el-table-column
                                 prop="brand"
                                 label="Brand"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="unitType"
                                 label="Unit Type"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="series"
                                 label="Series"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="capacity"
                                 label="Capacity"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="models"
                                 label="Models"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="engine"
                                 label="Engine"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="transmission"
                                 label="Transmission"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="battery"
                                 label="Battery"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="charger"
                                 label="Charger"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="mast"
                                 label="Mast"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="forks"
                                 label="Forks"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="tyres"
                                 label="Tyres"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="port"
                                 label="Port"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="price"
                                 label="Price"
                         >
                         </el-table-column>

                     </el-table>
                    <!--unit table end-->

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                        <el-button type="warning" @click="submitForm">Convert to Contract</el-button>
                    </span>
                </el-dialog>


            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'


    export default {
        name: "info-collect",
        data() {
            return {
                unitList:[
                    {"brand":"Hangcha",
                        "unitType":"AC","capacity":"2T","series":"3-w J series forklift rear wheel motivated type",
                        "models":"CPCD25N-RG2","engine":"Xinchai China：C490BPG-416","transmission":"Chinese","battery":"",
                        "charger":"","mast":"2.0M Duplex Mast","forks":"1150mm pucker fork","tyres":"Super elastic tyre (solid tyre)",
                        "port":"Sumatara","options":[{"value":"guide wheel"},{"value":"loading bracket"}],"price":6202}],
                visitList: [{
                    quotation: '0000001',
                    salesNumber: '0000001',
                    customerName: "Violence",
                    requestDate: '2018-12-12',
                    requestBy: "Ptetnonoer",
                    status: 'Save',
                    id: 2
                }],
                requestNo: '',
                requestDate: '',
                requestBy: '',
                customerName: '',
                status: '',
                key: '',
                total: 10,
                dialogVisible: false
            }
        },
        filters: {

            numFilter(value) {

                // 截取当前数据到小数点后两位

                let realVal = Number(value).toFixed(2)

                // num.toFixed(2)获取的是字符串

                return Number(realVal)

            }

        },
        methods: {
            chooseUnit(){
                const {brand,unitType,capacity,series,models,engine,transmission,battery,charger,mast,forks,tyres,port,options,price} = this
                const unit = {brand,unitType,capacity,series,models,engine,transmission,battery,charger,mast,forks,tyres,port,options,price};
                this.unitList.push(unit);
                this.unitShow = false;
                this.clear();
            },
            showUnit() {
                this.unitShow = true;
            },
            submitForm() {
                this.dialogVisible = false
            },
            clear() {
                this.model={};
                this.brand='';
                this.unitType='';
                this.capacity='';
                this.series='';
                this.models='';
                this.battery='';
                this.charger='';
                this.mast = '';
                this.forks='';
                this.tyres = '';
                this.port='';
                this.price='';
                this.options=[{value:''}]
            },
            openAdd() {
                this.clear();
                this.dialogVisible = true
            },
            openEdit() {
                this.dialogVisible = true
            },
            changePage(page) {
                alert(page)
            }
        },
        watch: {
            brand(b) {
                this.model = this.carData.find(item => item.brand === b) ? this.carData.find(item => item.brand === b).model : ''
            },
            mast() {
                this.price = this.price + 1
            },
            tyres() {
                this.price = this.price + 2
            },
            forks() {
                this.price = this.price + 3
            },
            options() {
                this.price = this.price + 4
            },
            port() {
                this.price = this.price * 1.5
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
        .price {
            font-size: 20px;
            margin-top: 30px;
            text-align: center;
        }
        .spin {
            border-bottom: 2px solid #ddd;
            margin-bottom: 30px;
        }
        .input {
            width: 200px;
        }
    }
</style>